@import "base.scss";
@import "mixin.scss";

.video {
    display: block;
    padding: 0;
    vertical-align: top;
    color: $colorfff;
    font-style: normal;
    font-weight: 400;
    font-size: $fontSize12;
    line-height: 1;
    background: $color000;
}

.sewise-player-ui {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    font-size: $fontSize12;
    color: $colorfff;
    &:hover {
        .controlbar {
            @include opacity(1);
        }
    }
    .controlbar {
        position: absolute;
        width: 100%;
        height: 4 * $fontSize10;
        left: 0;
        bottom: 0;
        @include opacity(0);
        z-index: 5;
        .controlbar-bg {
            position: absolute;
            width: 100%;
            text-indent: -10000px;
            height: 6 * $fontSize10;
            bottom: 0;
            left: 0;
            @include linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.65));
            z-index: 5;
        }
        .controlbar-btns {
            position: absolute;
            top: 0;
            width: 100%;
            height: 4 * $fontSize10;
            list-style-type: none;
            z-index: 9;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            .controlbar-btn {
                margin: 0 $fontSize16 / 2;
            }
            > div a {
                display: block;
                width: 100%;
                height: 100%;
                text-indent: -10000px;
                background-image: url("../img/icons/player.png");
                background-repeat: no-repeat;
            }
        }
    }
}

.controlbar-div-play,.controlbar-div-pause {
    width: $fontSize16 + 1;
    height: $fontSize18;
}

.controlbar-div-play {
    a {
        &.controlbar-btns-play {
            @include link-backPos((0 0),(0 (- $fontSize20)));
        }
    }
}
.controlbar-div-pause {
    a {
        &.controlbar-btns-pause {
            @include link-backPos((- ($fontSize20 + 1) 0),((- ($fontSize20 + 1))) (- $fontSize20));
        }
    }
}

.controlbar-div-fullscreen,.controlbar-div-normalscreen {
    width: $fontSize16;
    height: $fontSize18;
}

.controlbar-div-fullscreen {
    a {
        &.controlbar-btns-fullscreen {
            @include link-backPos((- (12 * $fontSize10 + 5) 0),(- (6 * $fontSize10 + 1) (- $fontSize20)));
        }
    }
}
.controlbar-div-normalscreen {
    a {
        &.controlbar-btns-normalscreen {
            @include link-backPos((- (14 * $fontSize10 + 2) 0),(- (7 * $fontSize10 + 8) (- $fontSize20)));
        }
    }
}

.controlbar-div-resolution,.controlbar-div-palyRate,.controlbar-div-volume {
    cursor: pointer;
}
.controlbar-div-resolution .controlbar-btns-menu,
.controlbar-div-palyRate .controlbar-btns-menu {
    display: none;
    position: absolute;
    bottom: 4 * $fontSize10;
    right: - ($fontSize22 + 1);
    width: 7 * $fontSize10;
    padding:$fontSize10 / 2 0;
    color: $colorea;
    text-align: center;
    background: rgba(0,0,0,.4);
}
.controlbar-div-resolution .controlbar-btns-menu {
    font-size: $fontSize14;
}
.controlbar-div-resolution .controlbar-btns-resolution-item {
	padding:$fontSize10 / 2;
}
.controlbar-div-resolution .controlbar-btns-resolution-item:hover,
.controlbar-div-palyRate .controlbar-btns-palyRate-item:hover {
	background:rgba(255,255,255,.2);
}
.controlbar-div-resolution .controlbar-btns-resolution-item.active,
.controlbar-div-palyRate .controlbar-btns-palyRate-item.active {
	color: $theme;
}
.controlbar-div-resolution .controlbar-btns-resolution,
.controlbar-div-palyRate .controlbar-btns-palyRate {
	text-align: center;
	line-height: $fontSize20;
	font-size: $fontSize12;
	color: $colorea;
}
.controlbar-div-resolution:hover .controlbar-btns-resolution,
.controlbar-div-palyRate:hover .controlbar-btns-palyRate {
	color: $theme;
}
.controlbar-div-resolution .controlbar-btns-resolution,
.controlbar-div-palyRate .controlbar-btns-palyRate {
	height: $fontSize20;
}
.controlbar-div-palyRate,.controlbar-div-resolution {
	padding: $fontSize10 0;
}
.controlbar-div-palyRate:hover .controlbar-btns-menu,
.controlbar-div-resolution:hover .controlbar-btns-menu {
	display: block;
}
.controlbar-div-volume:hover .controlbar-div-volumeline {
	visibility: visible;
}
.controlbar-div-palyRate .controlbar-btns-menu {
	font-size: $fontSize12;
}
.controlbar-div-palyRate .controlbar-btns-palyRate-item {
	outline: none;
	padding:$fontSize12 / 2;
}
.controlbar-div-barrage {
	width: 3 * $fontSize10;
	height: $fontSize18;
	cursor: pointer;
}
.controlbar-div-barrage a.open {
	background-position: - (9 * $fontSize10 + 3) 0;
}
.controlbar-div-barrage a.close {
	background-position: - (6 * $fontSize10 + 2) 0;
}
.controlbar-div-volume .controlbar-volumeline-dragger {
	width: $fontSize10 / 2;
	bottom: 0;
	opacity: 0;
	z-index: 9;
}
.controlbar-div-volume .controlbar-div-soundclose,
.controlbar-div-volume .controlbar-div-soundopen {
	width: $fontSize12 + 1;
	height: $fontSize18;
	padding:$fontSize10 0;
}
.controlbar-div-volume{
    a {
        &.controlbar-btns-soundopen {
            @include link-backPos((- $fontSize12 * 4 0),((- $fontSize12 * 4) (- $fontSize20)));
        }
    }
}
.controlbar-div-volume {
    a {
        &.controlbar-btns-soundclose {
            @include link-backPos((- $fontSize18 * 2 0),(- $fontSize18 * 2 (- $fontSize20)));
        }
    }
}
.controlbar-div-volume .controlbar-div-volumeline {
	visibility: hidden;
	bottom: 3 * $fontSize10 + 5;
	right: - $fontSize10 / 2;
	width: $fontSize10 / 2;
	padding:0 $fontSize10;
	height: 8 * $fontSize10;
}
.controlbar-div-volume .controlbar-volumeline {
	width: $fontSize10 / 2;
	height: 100%;
	bottom: 0;
}
.controlbar-div-volume .controlbar-volumeline-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: $colorea;
}
.controlbar-div-volume .controlbar-volumeline-volume {
	bottom: 0;
	width: 100%;
	background: $theme;
}
.controlbar-div-volume .controlbar-volumeline-point {
	width: $fontSize10 + 1;
	height: $fontSize10 + 1;
	bottom: 4 * $fontSize10 + 2;
	right: - $fontSize12 / 4;
	background: $colorfff;
	z-index: 5;
}
.SY-live .controlbar-btns .controlbar-playtime {
	position: relative;
	left:$fontSize14 + 1;
}
.controlbar-progress {
	height: $fontSize14 / 2;
	-webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
}
.controlbar-progress .progressBox {
	position: relative;
	top: 0;
	width:100%;
	height: 100%;
	cursor: pointer;
}
.controlbar-progress .controlbar-progress-totalline {
	width: 100%;
	height: $fontSize14 / 2;
	background: $colorea;
}
.controlbar-progress .controlbar-progress-loadedline {
	position: absolute;
	top: 0;
	height: $fontSize14 / 2;
	background: $colorccc;
}
.controlbar-progress .controlbar-progress-playedline {
	position: absolute;
	top: 0;
	left: 0;
	height: $fontSize14 / 2;
	background: $theme;
	z-index: 9;
}
.controlbar-progress .controlbar-progress-playpoint {
	position: absolute;
	width: $fontSize14;
	height: $fontSize14;
	top: - $fontSize12 / 3;
	right: - $fontSize14 / 2;
	background: $colorfff;
	cursor: pointer;
	z-index: 9;
}
.controlbar-progress .controlbar-progress-tip {
	position: absolute;
	top: 0;
	width: $fontSize10 / 10;
	height: $fontSize14 / 2;
	background: $colorab;
	z-index: 9;
}
.controlbar-progress .controlbar-progress-tip span {
	position: absolute;
	top: - $fontSize20;
	left: - ($fontSize14 + 1);
}
.sewise-player-ui .big-play-btn {
	position: absolute;
	display: none;
	width: 5 * $fontSize10 + 4;
	height: 5 * $fontSize10 + 4;
	line-height: 5 * $fontSize10 + 4;
	text-align: center;
	background: rgba(51,51,51,.6);
	top: 50%;
	left: 50%;
    margin: - $fontSize16 * 2 0 0 (- $fontSize16 * 2);
}
.sewise-player-ui .big-play-btn:hover .big-play-icon {
	color: $theme;
}
.sewise-player-ui .big-play-icon {
	color: $colorea;
}
.sewise-player-ui .big-play-btn .pause {
	font-size:$fontSize20 + 6;
}
.sewise-player-ui .big-play-btn .pause i {
	margin-left: $fontSize10 - 1;
}
.sewise-player-ui .big-play-btn .replay {
	font-size: $fontSize20 + 6;
}
.controlbar-div-time > div {
	display: inline-block;
}
.sewise-player-ui .progressbar {
	width: 100%;
	height: $fontSize12 / 4;
	background: rgba(0,0,0,.3);
	overflow: hidden;
	bottom: 0;
	left: 0;
	@include opacity(1);
}
.sewise-player-ui .progressbar .progress-inner {
	height: $fontSize12 / 4;
	bottom: 0;
	left: 0;
	background: $theme;
}
.sewise-player-ui:hover .progressbar,
.sewise-player-ui.pause:hover .progressbar {
	@include opacity(0);
}
.sewise-player-ui.replay .big-play-btn,
.sewise-player-ui.pause .big-play-btn,
.sewise-player-ui.pause .controlbar-div-pause,
.sewise-player-ui.replay .big-play-btn .replay{
	@include opacity(1);
}
.sewise-player-ui.replay .progressbar,
.sewise-player-ui.replay .controlbar,
.sewise-player-ui .big-play-btn .replay,
.sewise-player-ui .controlbar-div-pause {
	@include opacity(0);
}
.sewise-player-ui .controlbar-div-pause,
.sewise-player-ui.pause .controlbar-div-play,
.sewise-player-ui.replay .big-play-btn .pause {
	display: none;
}
.sewise-player-ui.replay .big-play-btn,
.sewise-player-ui.pause .controlbar-div-pause,
.sewise-player-ui.pause .big-play-btn,
.sewise-player-ui.replay .big-play-btn .replay {
	display: block;
}
.SY-live .S-living .controlbar-btns .controlbar-btn {
    margin: 0 $fontSize16 - 1;
}
